<template>
    <div style="display: flex; flex-direction: column; height: 100%;">
        <Title :title="title"></Title>
        <div ref="right1" style="flex: 1; display: flex; align-items: center; justify-content: center;"></div>
    </div>
</template>
<script>
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
export default {
    data() {
        return {
            title: '实时湿度曲线',
            humData: [],
            chart: null,
            dataStatus: 'loading'
        }
    },
    methods: {
        loadHumidityChart() {
            if (this.humData.length === 0) {
                this.showStatusTip();
                return;
            }

            const container = this.$refs.right1;
            if (this.chart) {
                this.chart.destroy();
            }

            this.chart = new Area(container, {
                data: this.humData,
                xField: 'time',
                yField: 'humidity',
                xAxis: {
                    range: [0, 1],
                    tickCount: 5,
                    title: {
                        visible: true,
                        text: 'time',
                        style: {
                            fill: 'white',
                            opacity: 1
                        }
                    },
                    label: {
                        rotate: -45,
                        style: {
                            fill: 'white',
                            opacity: 1
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        visible: true,
                        text: 'humidity',
                        style: {
                            fill: 'white',
                            opacity: 1
                        }
                    },
                    label: {
                        style: {
                            fill: 'white',
                            opacity: 1
                        }
                    }
                },
                areaStyle: () => {
                    return {
                        fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
                    };
                },
                line: {
                    color: '#1890ff',
                    size: 2
                },
                point: {
                    visible: true,
                    size: 5,
                    shape: 'diamond',
                    style: {
                        fill: 'white',
                        stroke: '#1890ff',
                        lineWidth: 2,
                        opacity: 1
                    },
                },
                label: {
                    visible: true,
                    style: {
                        fill: 'white',
                        opacity: 1
                    }
                },
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 5000,
                    },
                },
                tooltip: {
                    formatter: (datum) => {
                        return {
                            name: 'humidity',
                            value: `${datum.humidity}%`
                        };
                    },
                    showMarkers: false,
                    domStyles: {
                        "g2-tooltip": {
                            background: "#147",
                            color: "white",
                            fontSize: "20px"
                        }
                    }
                },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'red',
                        },
                    },
                },
                interactions: [{ type: 'marker-active' }],
                autoFit: true
            });

            this.chart.render();
        },

        showStatusTip() {
            const container = this.$refs.right1;
            let tipText = '';
            switch (this.dataStatus) {
                case 'loading':
                    tipText = '数据加载中...';
                    break;
                case 'error':
                    tipText = '数据加载失败，请重试';
                    break;
                case 'empty':
                    tipText = '暂无湿度数据';
                    break;
                default:
                    tipText = '';
            }

            if (tipText) {
                container.innerHTML = `<div style="color:white;font-size:14px;">${tipText}</div>`;
            }
        },

        async getHumData() {
            try {
                const today = moment().format('YYYY-MM-DD');
                const todayRes = await get('http://106.14.227.138:7001/dashboard/pageQueryTodayData', {
                    page: 1,
                    pageSize: 100,
                    date: today
                });

                this.humData = this.formatRawData(todayRes.data?.list || [], '今天');
                this.dataStatus = this.humData.length > 0 ? 'success' : 'empty';
            } catch (error) {
                this.dataStatus = 'error';
                this.humData = [];
            } finally {
                this.$nextTick(() => this.loadHumidityChart());
            }
        },

        formatRawData(rawList, dayFlag) {
            return rawList
                .filter(item => {
                    const hasTime = item.insert_time || item.insertTime;
                    const hasHumidity = item.humidity !== undefined && item.humidity !== null;
                    return hasTime && hasHumidity;
                })
                .filter((_, index) => index % 10 === 0)
                .map(item => ({
                    time: moment(item.insert_time || item.insertTime).format('HH:mm'),
                    humidity: Number(item.humidity),
                    day: dayFlag
                }))
                .sort((a, b) => a.time.localeCompare(b.time));
        }
    },
    async mounted() {
        await this.getHumData();
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
}
</script>
<style scoped>
::v-deep .g2-tooltip {
    background: #147;
    color: white;
    font-size: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 5px 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

::v-deep .g2-legend-item {
    margin-right: 12px;
}

.status提示 {
    color: white;
    font-size: 14px;
}
</style>